大綱

• 頁面 引入 元件
• 使用 Props 父傳子
• Props 應用 (傳入參數的差異 v-bind使用與否)
• Props 傳址問題 (data初始化、computed運算)
• Props 新增、替換元件屬性
• Props 進階應用 (自定檢查建構式)

如何使用 Props

引入元件

• 注意 建議 元件名稱用 多個單詞組成，避免未來與 HTML 相衝 (編譯時)
• 多字詞屬性使用 user-name 連接，而非使用小鴕峰

• 風格指南

1. 建立 xxx.vue檔 於 src/components/HelloWorld.vue檔
2. 於 views/Home.vue (頁面檔) 引入

  // @ 會指向 /src  (webpack編譯時幫你導向)
  import HelloWorld from '@/components/HelloWorld.vue' 

  export default{
    components: {
      HelloWorld,   // 對應引入的名稱，此名稱亦用於 template
    }
  }

父傳子 Props

• 去看 Props 使用手冊文章
• 多字詞屬性 使用 - 串接，而非使用小鴕峰寫法

• 於 頁面檔 template 中使用，給予屬性就會以 Props的方式往下傳遞

  <!--  傳遞純文字  -->
  <HelloWorld user-name="Welcome to Your Vue.js App" />
  
  <!--  動態附值  利用 v-bind: 就可以帶入 view 的 參數 -->
  <HelloWorld :user-name="post.title + ' by ' + post.author.name" />

4. 子元件以 Props 接收

• 盡可能的寫詳細，避免出錯，當型別錯誤會被偵測到

  export default {
   props: {
      src: {
        type: String,
        required: true,
        default: () => { message: "test"; },
        // 必須符合陣列中的值 才會通過
        validator: value => { ["test"].indexOf(value) !== -1; }
      }
    }
  }

Props 使用手冊

大綱

• Props 應用 (傳入參數的差異 v-bind使用與否)
• Props 傳址問題 (data初始化、computed運算)
• Props 新增、替換元件屬性
• Props 進階應用 (自定檢查建構式)

Props 應用 使用各型別

• Vue 中文文檔

• 靜態值 使用 "" 即可

• 動態值(有用到變數的) 使用 v-bind:title="post.title"

• 會被視為表達式，須要使用 v-bind者: 數字、布林、陣列、物件

• 布林值，預設為true(免v-bind)

  <!-- 可不代入值，預設為true，不使用 v-bind -->
  <blog-post is-published></blog-post>
  <!--    -->
  <blog-post v-bind:is-published="false"></blog-post>
  <blog-post v-bind:is-published="post.isPublished"></blog-post>

Props 傳入物件，不需要一個屬性一個屬性指定

• 使用 v-bind 關鍵字 直接帶入物件

  <!--  使用 v-bind 關鍵字 直接帶入物件  -->
  <blog-post v-bind="post"></blog-post>
  
  <!-- 上面的會被編譯成如下 -->
  <blog-post
    v-bind:id="post.id"
    v-bind:title="post.title"
  ></blog-post>

Props 注意事項

• 注意 JS 利用 Props 傳遞 陣列、物件是傳參考，因此元件改動會影響到父元件
• 應去避免更動 Props 本身，將其利用 computed 建立新的值在做操作

  // 狀況1: 將 Props 設為本地要使用的值，將其用 data 保存在對其操作
  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }
  
  // 狀況2: 純粹要對 Props 做運算處理，使用 computed
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase()
    }
  }

Props 參數應用

• 當 Props 未符合時會給予通知 (生產環境下)
• 使用 default & validator 無法取得 data & computed 值
• 因 Props 驗證跟產生，是在 beforeCreated 階段 (此時還未產生 data)

  export default {
    props: {
      msg: {
        // null 和 undefined 會通過任何型別
        type: String, // 不建議多個
        required: true,
        // default: "test"
        // default 可使用 Function 產生或直接給予值
        default: function() {
          return { message: "hello" };
        },
        validator: function(value) {
          // 必須符合陣列中的值 才會通過
          return ["success", "warning", "danger"].indexOf(value) !== -1;
        }
      }
    }
  };

Props 新增、替換元件屬性

現有一個 input (SomeForm) 已有 type & class 屬性想要替換他們，我們想將其 type 改成 text & 將其 class 新增 padding

• 我們利用 Props 傳入值 新增、替換元件的屬性值 (不使用 v-bind)
• class 與 style 較智能，會將兩者值合併
• 若要覆蓋 class, style 建議使用 props default，當有傳入值時使用傳入值

  <!--  元件  -->
  <input type="date" class="form-control">
  
  <!--  目標  -->
  <input name="123" type="text" class="form-control p-5">
  
  <!--  父元件傳送 Props  -->
  <some-form name="123" type="text" class="p-5"></some-form>

Props 進階應用

參照文檔 Type Checks 或 类型检查

• type:String 為原生構造函式，亦可自行定義，來檢測某物件是否為某建構式建造
• 禁用特性繼承 (有看沒懂..)